<template>
	<view class="contont">
		<nav-bar :title="pageInfo.navbarTitle" :iconLeft="true" />
		<uni-forms :model="form" :rules="rules" ref="refForm" label-width="100px">
			<view class="content-bgc">
				<view class="b-con">
					<uni-forms-item label="客户名称" name="name" required>
						<uni-easyinput v-model="form.name" placeholder="请输入客户名称" class="iptBor" :inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item label="联系人" name="full_name" required>
						<uni-easyinput v-model="form.full_name" placeholder="请输入联系人" class="iptBor" :inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item label="电话" name="phone" required>
						<uni-easyinput v-model="form.phone" placeholder="请输入电话" class="iptBor" :inputBorder="false"  @blur="blur('phone')"/>
					</uni-forms-item>
					<uni-forms-item label="客户类型" name="classify">
						<uni-data-select v-model="form.classify" :localdata="classify_list" placeholder="请选择客户类型"
							mode="underline" />
					</uni-forms-item>
					<uni-forms-item label="客户来源" name="source">
						<uni-data-select v-model="form.source" :localdata="source_list" placeholder="请选择客户来源" mode="underline" />
					</uni-forms-item>
					<uni-forms-item label="业务员" name="salesman_id">
						<uni-data-select v-model="form.salesman_id" :localdata="account_list" placeholder="请选择处理人" mode="underline"
							@change="saleChange" />
					</uni-forms-item>
					<uni-forms-item label="QQ" name="QQ">
						<uni-easyinput v-model="form.QQ" placeholder="请输入QQ" class="iptBor" :inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item label="微信号" name="wechat">
						<uni-easyinput v-model="form.wechat" placeholder="请输入微信号" class="iptBor" :inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item label="邮箱" name="email">
						<uni-easyinput v-model="form.email" placeholder="请输入邮箱" class="iptBor" :inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item label="办公地址" name="address">
						<uni-easyinput type="textarea" v-model="form.address" placeholder="请输入办公地址" />
					</uni-forms-item>
					<uni-forms-item label="主营业务" name="business">
						<uni-easyinput type="textarea" v-model="form.business" placeholder="请输入主营业务" />
					</uni-forms-item>
					<uni-forms-item label="备注" name="desc">
						<uni-easyinput type="textarea" v-model="form.desc" placeholder="请输入备注" />
					</uni-forms-item>
					<u-button type="primary" text="提交" @click="save"></u-button>
				</view>
			</view>
		</uni-forms>
	</view>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import clIndexApi from '../../../api/clientt/cl_index'

//页面标题
const pageInfo = reactive({
	navbarTitle: '客户列表',
	type: '',
	edit_id: null,
})

onLoad(option => {
	get_classify_list()
	get_staff_list()
	get_source_list()
	pageInfo.type = option.type
	if (option.type == 'edit') {
		pageInfo.navbarTitle = `${pageInfo.navbarTitle}(修改)`
		get_detail(option.id)
		pageInfo.edit_id = option.id
	} else {
		pageInfo.navbarTitle = `${pageInfo.navbarTitle}(新增)`
	}
});

const refForm = ref(null);
const form = reactive({
	classify: null,
	source: null,
	name: '',
	full_name: '',
	phone: '',
	salesman_id: null,
	email: '',
	QQ: '',
	wechat: '',
	address: '',
	business: '',
	desc: ''
})
const fields = Object.keys(form);
const rules = {
	name: { rules: [{ required: true, errorMessage: '请输入客户名称', }] },
	full_name: { rules: [{ required: true, type: 'number', errorMessage: '请输入联系人', }] },
	phone: {
		rules: [{ required: true, type: 'number', errorMessage: '请输入正确的联系方式' },
		{
			pattern: '^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$',
			errorMessage: '手机号格式不正确'
		}]
	},
};
function blur(field) {
	refForm.value.validateField([field]).then().catch(err => { })
}


function get_detail(id) {
	clIndexApi.client_detail(id).then(res => {
		const record = uni.$lodash.pick(res, fields)
		Object.assign(form, record)
	})
};

const source_list = ref([]);
function get_source_list() {
	clIndexApi.get_client_source({ page: 1, page_size: 99999 }).then(res => {
		source_list.value = res.results.map(v => ({
			text: v.name,
			value: v.id
		}))
	})
};

const classify_list = ref([]);
function get_classify_list() {
	clIndexApi.get_client_classify({ page: 1, page_size: 99999 }).then(res => {
		classify_list.value = res.results.map(v => ({
			text: v.name,
			value: v.id
		}))
	})
};

const account_list = ref([]);
function get_staff_list() {
	clIndexApi.get_staff({ page: 1, page_size: 99999 }).then(res => {
		account_list.value = res.results.map(v => ({
			text: v.full_name,
			value: v.id
		}))
	})
};

function saleChange(id) {
	const user = account_list.value.find(v => v.value == id)
	form.salesman_full_name = user?.text || ''
};

//提交操作
function save() {
	refForm.value.validate().then(() => {
		const params = uni.$lodash.cloneDeep(form) // 深拷贝一份form表单
		if (pageInfo.type == 'add') {
			clIndexApi.post_client(params).then(res => {
				uni.$u.toast('添加成功')
				setTimeout(() => {
					backRefsh();
				}, 1000)
			})
		} else {
			//修改
			clIndexApi.patch_client(params, pageInfo.edit_id).then((res) => {
				uni.$u.toast('修改成功')
				setTimeout(() => {
					backRefsh();
				}, 1000)
			})
		}

	}).catch((error) => {
		uni.$u.toast(error[0].errorMessage);
	})
};

//返回上一级并刷新上一级页面
function backRefsh() {
	uni.navigateBack({
		delta: 1, // 返回的页面层数，1 表示返回上一级
		success: () => {
			uni.$bus.useBusEmit('cl_index:refresh')
		}
	})
};

</script>

<style lang="scss" scoped></style>